<template>
  <a-spin :spinning='confirmLoading'>
    <a-row>
      <a-col :span='8'>
        <div class='title'>申请用户id</div>
        <div class='content'>{{model.userhomeId}}</div>
      </a-col>
      <a-col :span='8'>
        <div class='title'>用户邮箱</div>
        <div class='content'>{{model.username}}</div>
      </a-col>
      <a-col :span='8'>
        <div class='title'>用户手机号</div>
        <div class='content'>{{model.phone}}</div>
      </a-col>
    </a-row>
    <a-row style='margin-top: 30px'>
      <a-col :span='8'>
        <div class='title'>订单号</div>
        <div class='content'>{{model.orderNum}}</div>
      </a-col>
      <a-col :span='8'>
        <div class='title'>申请时间</div>
        <div class='content'>{{model.createTime}}</div>
      </a-col>
      <a-col :span='8'>
        <div class='title'>订单状态</div>
        <div class='content'>
        <span v-if='model.status==0'>未审核</span>
          <span v-if='model.status==1'>成功</span>
          <span v-if='model.status==5'>进行中</span>
          <span v-if='model.status==6'>拒绝</span>
        </div>
      </a-col>
    </a-row>
    <a-divider />
    <a-row>
      <a-col :span='8'>
        <div class='title'>提现方式</div>
        <div class='content'>
          <span v-if="model.withrawType==1">微信</span>
          <span v-if="model.withrawType==2">支付宝</span>
          <span v-if="model.withrawType==3">银行卡</span>
        </div>
      </a-col>
      <a-col :span='8'>
        <div class='title'>银行账号姓名</div>
        <div class='content'>{{model.accountName}}</div>
      </a-col>
      <a-col :span='8'>
        <div class='title'>银行卡号</div>
        <div class='content'>{{model.bankNumber}}</div>
      </a-col>
    </a-row>
    <a-row style='margin-top: 30px'>
      <a-col :span='8'>
        <div class='title'>银行名</div>
        <div class='content'>{{model.bankName}}</div>
      </a-col>
      <a-col :span='8'>
        <div class='title'>申请金额</div>
        <div class='content'>{{model.applyAmount}}</div>
      </a-col>
      <a-col :span='8'>
        <div class='title'>实际打款金额</div>
        <div class='content'>{{model.amount}}</div>
      </a-col>
    </a-row>
    <a-divider />
    <a-row>
      <div class='title'>审核理由</div>
    </a-row>
    <a-row style='margin-top: 20px'>
      <a-textarea placeholder="请输入理由" style='height: 100px' v-model='model.examineContent'  :disabled="disabled" />
    </a-row>
    <a-row style='margin-top: 20px'>
      <div class='title'>附件</div>
    </a-row>
    <a-row style='margin-top: 20px'>
      <j-image-upload is-multiple v-model='model.examineUrl'  :disabled="disabled"></j-image-upload>
    </a-row>
    <a-row style='margin-top: 20px'>
      <a-col :span='12'>
        <a-button type='primary' @click='examine(5)' style='margin-left: 200px'>同意</a-button>
      </a-col>
      <a-col :span='12'>
        <a-button @click='examine(6)' style='margin-left: 100px'>拒绝</a-button>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import JThirdAppButton from '@comp/jeecgbiz/thirdApp/JThirdAppButton.vue'

export default {
  name: 'WithrawalForm',
  components: {
    JThirdAppButton
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        type: [
          { required: true, message: '请输入交易类型(1申购 2赎回 3提现)!' }
        ],
        amount: [
          { required: true, message: '请输入金额!' }
        ],
        status: [
          { required: true, message: '请输入状态(0 进行中 1成功 2过期 3异常 4失败)!' }
        ],
        orderNum: [
          { required: true, message: '请输入订单号!' }
        ]
      },
      url: {
        add: '/fund/userhomeOrder/add',
        edit: '/fund/userhomeOrder/edit',
        queryById: '/fund/userhomeOrder/queryById',
        examine: '/fund/userhomeOrder/examine'
      }
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }

      })
    },
    examine(status) {

      let httpurl = this.url.examine
      let method = 'post'
      let param =
        {
          id: this.model.id,
          examineUrl:this.model.examineUrl,
          examineContent:this.model.examineContent,
          status: status
        }
      var that = this
      httpAction(httpurl, param, method).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('ok')
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    }
  }
}
</script>

<style scoped>
.title {
  margin-left: 10px;
  font-size: 18px;

}

.content {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: bolder;
}

</style>